<template>
  <a-row :gutter="0" class="salary-input">
    <a-col :span="11">
      <a-input-number
        placeholder="请输入最低薪酬"
        :min="1"
        :max="100"
        :step="1"
        :formatter="(value:any) => formatNumber(value)"
        :parser="(value:any) => parseNumber(value)"
        v-model:value="formData.desiredSalaryMin"
        @change="(v:any)=>onChange(v,'desiredSalaryMin')"
        size="large"
      />
    </a-col>
    <a-col :span="2">
      <div class="center">―</div>
    </a-col>
    <a-col :span="11">
      <a-input-number
        placeholder="请输入最高薪酬"
        v-model:value="formData.desiredSalaryMax"
        :min="1"
        :max="100"
        :step="1"
        size="large"
        :formatter="(value:any) => formatNumber(value)"
        :parser="(value:any) => parseNumber(value)"
        @change="(v:any)=>onChange(v,'desiredSalaryMax')"
      />
    </a-col>
  </a-row>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import { Form } from 'ant-design-vue';
import { formatNumber, parseNumber } from '@/utils/util';

const props: any = withDefaults(defineProps<{ value: any }>(), {
  value: () => ({
    desiredSalaryMax: 1,
    desiredSalaryMin: 1,
  }),
});

const $emit = defineEmits(['update:value', 'change']);
const formItemContext = Form.useInjectFormItemContext();
const formData = computed<any>({
  get() {
    return props.value;
  },
  set(value) {
    console.log(value);
  },
});

const triggerChange = (changedValue: any) => {
  $emit('update:value', { ...props.value, ...changedValue });
  formItemContext.onFieldChange();
};

function onChange(value: any, flag: any) {
  const vv = Object.assign(formData.value, { [flag]: value });
  triggerChange(vv);
}
</script>

<style lang="less" scoped>
.salary-input {
  :deep(.ant-input-number) {
    width: 100%;
  }
  .center {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    overflow: hidden;
  }
}
</style>
